Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Acestea sunt numite in literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara inchisa " > ". Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod.
Pasul 1:
Deschideti editorul NOTEPAD si intre
cele doua marcaje <html> si </html> vom introduce
doua sectiuni:
- sectiunea de antet <head>...</head> (capul) si
- corpul documentului <body>...</body> (corpul). Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.
Titlul unei pagini se obtine inserand in sectiunea <head>...</head> a urmatoarei linii:
<title>Aceasta este prima mea pagina de
Web</title>
Continutul blocului <title>...</title> va aparea in bara de titlu a ferestrei browser-ului.
Culoarea unei pagini se precizeaza prin intermediul unui
atribut al etichetei <body> cu atributul bgcolor,
de exemplu: <body bgcolor = culoare>.
Un font (litera) este caracterizat de urmatoarele:
culoare (color);
tipul sau stilul ( face);
marimea (size);
grosime (weight).
Exemplu de culoare si marime a caracterelor:
<html>
<head>
<title> Culoarea si marimea fontului</title>
</head>
<body>
Aceste
linie este scrisa cu caractere normale.
<br> <font color="red">Aceasta linie este
rosie.</font>
<br>Aici<font color="green" size=5>fiecare</font>
<font color="blue" size=6>cuvant</font>
<font color="yellow" size=3>are</font>
<font color="cyan" size=7>alta</font>
<font color="magenta" size=2>culoare.</font>
<br> <font face="arial">Linie scrisa cu
caractere arial.</font>
</body>
</html>
Alinierea textului
cu ajutorul atributului align, avand valorile posibile " left "(stanga), " center "(centru) sau " right "(dreapta).
Exemplu:
<p align=”center”> Tema acasa</p>
<p align=”right”>Data de astazi</p>
<p>Exercitiul 1:</p>
Intr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>. <h2>, <h3>, <h4>, <h5>, <h6>. <h1> este pentru scrierea cu caractere foarte mari iar <h6> cu cele mai mici caractere.
Pentru a trasa o linie orizontala se utilizeaza urmatorele atribute ale etichetei <hr>:
align permite alinierea
liniei orizontala. Valorile posibile sunt " left " ,"
center " si " right "; width permite alegerea lungimii
liniei; size permite alegerea grosimii
liniei; noshade cand este prezent defineste
o linie fara umbra; color permite definirea
culorii liniei. <html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii
orizontale </h1> O
linie aliniata la stanga, latime 100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara
umbra.
<hr align="center"
width="50%" size="5" noshade> Urmeaza o
linie aliniata la dreapta , de latime 150 de pixeli,
grosime 12 pixeli , de culoare rosie.
<hr align="right" width=150
size=12 color="red"> Linii orizontale de diferite
marimi si culori centrate
<center> <hr width=10% color="lightblue"> <hr
width=40% color="pink"> <hr width=70%
color="orange"> <hr width=100% color="blue">
<hr width=70% color="cyan"> <hr width=40%
color="magenta"> <hr width=10% color="red">
</center>
</body>
</html>
Imagini
Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la "image"=imagine).
Pentru a putea fi gasita imaginea care va fi introduce, se utilizeaza un atribut al etichetei <img> si anume src (de la "source"=sursa). Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci se va scrie:
<img src="imagine1.jpg">
Dimensiuniile unei imagini pot fi modificate prin intermediul atributelor width(latimea imaginii) si height (inaltimea imaginii).
<html>
<head>
<title> Imagine cu chenar si marit</title>
</head>
<body>
O imagine cu chenar si de 200 pixeli X 15 %
<img src="images1.jpg" border="5" width="350"
height="25%" alt="Palatul
Copiilor Suceava">Text dupa imagine.
</body>
</html>
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.